<!-- home页顶部导航栏 -->
<template>
  <el-row v-if=" DingBuDaoHang.length > 0" type="flex" justify="center" align="middle" class="row-bg nav_lists">
    <el-col v-for="(item, index) in DingBuDaoHang" :key="index">
      <div @click="pageurl(item)" :class="isOpen(item) ? 'opened' : ''" class="nav_list common hiddenOverflow">
        <a href="javascript:void(0)" v-html="item.showTxt"></a>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import {functionClick, totalapi} from "../api/http";

export default {
  props: {},
  data() {
    return {
      DingBuDaoHang: [],
      openNav: null
    }
  },
  computed: {
    currentRoutePath() {
      return this.$route.path
    }
  },
  watch: {
    currentRoutePath: {
      immediate: true,
      handler(newV, oldV) {
        console.info(this.DingBuDaoHang.length > 0, this.openNav && this.openNav.url != newV, newV)
        if (this.DingBuDaoHang.length > 0) {
          if (this.openNav && this.openNav.url != newV)
            this.$forceUpdate()
        }
      }
    },
  },
  async created() {
    await this.loadTopNavConfig()
  },
  methods: {
    async loadTopNavConfig() {
      let nav_setting = JSON.parse(sessionStorage.getItem('nav_setting'));
      if (sessionStorage.getItem('nav_setting') !== null) {
        this.DingBuDaoHang = nav_setting
      } else {
        let nav = [];
        let pageConfig = window.pageConfig
        if (sessionStorage.getItem('total') === null) {
          const res1 = await totalapi()
          if (res1.data.code === 200) {
            sessionStorage.setItem('total', JSON.stringify(res1.data.data))
            nav = res1.data.data.mch_info.pc_params.nav;
          } else {
            this.$message(res1.data.msg)
          }
        } else {
          nav = JSON.parse(sessionStorage.getItem('total')).mch_info.pc_params.nav;
        }
        if (nav) {
          pageConfig.DingBuDaoHang = pageConfig.DingBuDaoHang.concat(nav)
        }

        if (!window.pageConfig || !Array.isArray(pageConfig.DingBuDaoHang)) {
          throw new Error('顶部导航栏未配置')
        }
        let navConfig = pageConfig.DingBuDaoHang.map(e => {
          let res = Object.assign({}, e)
          return res
        })
        sessionStorage.setItem('nav_setting', JSON.stringify(navConfig))
        this.DingBuDaoHang = navConfig
      }
    },
    isOpen(navConfig) {
      return this.openNav === navConfig || this.currentRoutePath === navConfig.url
    },
    pageurl(navConfig) {
      if (navConfig.haveMoney) {
        functionClick(0)
      }
      if (navConfig.inner) {
        this.$router.push(navConfig.url)
          .then(e => {
            this.openNav = navConfig
          })
          .catch(e => {
            console.debug('顶部导航配置错误', navConfig, e)
            if (/^(http)/ig.test(navConfig.url))
              window.open(navConfig.url, '_blank')
          })
      } else if (/^(http)/ig.test(navConfig.url)) {
        window.open(navConfig.url, '_blank')
        this.openNav = navConfig
      } else {
        console.debug('顶部导航配置错误,无法正确打开', navConfig)
      }
    }
  },

}

</script>
<style scoped lang="less">
@import url('~@/assets/style/var.less');
@import url('~@/assets/style/common.less');

.nav_lists {
  height: 3rem;
  .nav_list {
    display: inline-block;
    padding: .5rem .5rem;
    width: 4rem;
    text-align: center;
    color: #fff;
    font-size: 16px;
    background: rgba(229, 229, 229, 0.3);
    border-radius: 10px;
    margin: 0 15px;
    box-sizing: unset;

    /**

 */
    &.opened,
    &:hover {
      background-color: @border-color;
    }
  }
}</style>
